<template>
    <div>
        <el-container>
            <el-header>
                <div  class="header">
                  <el-row>
                      <el-col :span=4 class="headerCol">
                          <el-image :src="require('../../../img/littleIcon/doctorLogo.png')"></el-image>
                      </el-col>
                      
                      <el-col :span=12 class="headerSex">
                        <el-steps :active="0" finish-status="success" simple='true'>
                            <el-step title="选择疫苗机构" icon="el-icon-edit"></el-step>
                            <el-step title="查看疫苗机构" icon="el-icon-edit"></el-step>
                            <el-step title="预约疫苗" icon="el-icon-edit"></el-step>
                        </el-steps>
                      </el-col>

                      <el-col :span=6>
                           针数： 
                          <el-select class="headerSex" placeholder="选择针数" v-model="setCount" @change="countChange">
                              <el-option label="不限" value="0"></el-option>
                              <el-option label="1针" value="1"></el-option>
                              <el-option label="2针" value="2"></el-option>
                              <el-option label="3针" value="3"></el-option>
                          </el-select>
                      </el-col>
                  </el-row>                  
              </div>
            </el-header>
            <el-main>
                <div @click="getVaccinItem(item)" class="mainTextDiv" v-for="(item,index) in vaccinDept" :key="index">
                    <el-row>
                        <el-col :span="8">
                            <!-- <el-image :src="require('../../../junM/img/'+item.img)"></el-image> -->
                            <div style="width:300px;margin-left:90px">
                            <el-image :src="require('../../../img/vaccin/title1.jpeg')"></el-image>
                            </div>
                        </el-col>
                        <el-col :span="16" class="text-col">
                            <h3>
                                {{item.deptName}}&nbsp;&nbsp;&nbsp;
                                <label style="color:red;font-size:25px">
                                    {{item.setCount}}针
                                    <el-image :src="require('../../../img/vaccin/z.png')"></el-image>
                                    </label>
                            </h3>
                            <span>{{item.deptAddress}}</span><br><br>
                            <span>当天总数：{{item.tVaccinNoteDept.daySumCount}}</span><br><br>
                            <span>已预约：{{item.tVaccinNoteDept.orderCount}}</span>
                            <el-button type="primary" icon="el-icon-search" size="mini" class="btn-check">查看</el-button>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            vaccinDept:{
                tVaccinNoteDept:{}
            },
            setCount:''
        }
    },
    methods:{
        vaccinDeptInit(){
            axios.get("vaccinDept/queryVaccinDeptAll")
            .then(res => {
                this.vaccinDept=res.data
            })
            .catch(err => {
                console.error(err); 
            })
        },
        countChange(){
            axios.get("vaccinDept/querySetCount?setCount="+this.setCount)
            .then(res => {
                this.vaccinDept=res.data
            })
            .catch(err => {
                console.error(err); 
            })
        },
        getVaccinItem(item){
            this.$store.commit('vaccinItemInit',item)
            this.$router.push("/vaccinCheck")
        }
    },
    created(){
        this.vaccinDeptInit()
    },
}
</script>

<style scoped>
    .mainTextDiv{
        cursor: pointer;
    }
    .text-col{
        text-align: left;
    }
    .btn-check{
        margin-left: 800px;
        /* float: right; */
    }
    .headerSex{
        margin-top:20px;
    }
    .headerCol{
        margin-top: 10px;
        text-align: left;
    }
</style>